<template>
    <div>

        <div class="cont" style="display: block;">
            <div class="cont" style="width: 100%;margin: 0;">
                <div class="title" style="display: table-cell;">
                    <div style="width: 40px;">标题</div>
                </div>
                <input type="text" v-model="inputdata" style="display: table-cell;width: 100%;"
                    :placeholder="$attrs.editdefaulttitle">
            </div>
        </div>
        <div v-if="$attrs.editType == 'inputType'">
            <div class="cont" style="display: block;">
                <div class="cont" style="width: 100%;margin: 0;">
                    <div class="title" style="display: table-cell;">
                        <div style="width: 80px;">右侧按钮</div>
                    </div>
                    <div style="display: table-cell;width: 100%;">
                        <select style="width: 100%;" v-model="rightbutton">
                            <option :value="v" v-for="v in switcharr">{{ v == 'close' ? '关闭' : '开启' }}</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="$attrs.editType == 'selectType'">
        </div>
        <div v-if="$attrs.editType == 'uploadType'">
            <div class="cont" style="display: block;">
                <div class="cont" style="width: 100%;margin: 0;">
                    <div class="title" style="display: table-cell;">
                        <div style="width: 80px;">是否双数</div>
                    </div>
                    <div style="display: table-cell;width: 100%;">
                        <select style="width: 100%;" v-model="ifdub">
                            <option :value="v" v-for="v in switcharr">{{ v == 'close' ? '关闭' : '开启' }}</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div v-if="$attrs.editType == 'checkboxType'">
            <div class="cont" style="display: block;">
                <div class="cont" style="width: 100%;margin: 0;">
                    <div class="title" style="display: table-cell;">
                        <div style="width: 80px;">数量</div>
                    </div>
                    <input type="text" v-model="count" style="display: table-cell;width: 100%;" placeholder="请输入数量"
                        @blur="setcount">
                </div>
            </div>
        </div> -->

    </div>
</template>

<script>
export default {
    data() {
        return {
            inputdata: '',
            textareadata: '',
            rightbutton: '',
            ifdub: '',
            count: 2,
            switcharr: ['close', 'open']
        }
    },
    methods: {
        setcount() {
            Number(this.count) < 2 ? this.count = 2 : '';
            this.$emit('tosetleftdata', { count: Number(this.count), type: this.$attrs.editType })
        }
    },
    watch: {
        inputdata: function (news, olds) {
            this.$emit('tosetleftdata', { title: news || this.$attrs.editdefaulttitle, type: this.$attrs.editType })
        },
        rightbutton: function (news, olds) {
            this.$emit('tosetleftdata', { rightbutton: news, type: this.$attrs.editType })
        },
        ifdub: function (news, olds) {
            this.$emit('tosetleftdata', { ifdub: news, type: this.$attrs.editType })
        }
    },
    mounted() {
        this.$attrs.leftdata.map((item) => {
            item.id == this.$attrs.editid ? this.inputdata = item.nick : ''
            item.id == this.$attrs.editid ? (
                item.name == this.$attrs.editType ? this.rightbutton = (item.ifrightbutton ? 'open' : 'close') : '',
                item.name == this.$attrs.editType ? this.ifdub = (item.ifdub ? 'open' : 'close') : '',
                item.name == this.$attrs.editType ? this.count = item.count : ''
            ) : ''
        })
    }
}
</script>

<style scoped>
.title {
    padding: 20px 10px 0 0;
}

.cont {
    display: table;
    margin: 0 20px;
    border-bottom: 1px solid #ccc;
}

.cont input,
.cont select {
    margin: 20px 0;
}
</style>